import React, { Component, PureComponent } from 'react'
// PureComponent 作用基本上和Component. 但是还额外的帮我们写了shouldComponentUpdate.并自动判断了所有的props和state数据.所以我们使用了PureComponent就无需自己写ShouldComponentUpdate
// 咋用: 让需要性能优化的组件,直接继承PureComponent
// 注意:
// 1.  一旦继承了PureComponent就千万不要再写shouldComponentUpdate
// 2. 如果是复杂数据类型,就只能判断地址是否变化了
export default class Test extends Component {
  state = {
    msg: 'hello 123',
    obj: { name: 'zs' },
  }
  //   shouldComponentUpdate不写的时候,返回的默认值就是true
  shouldComponentUpdate(nextProps, nextState) {
    // 上一次传过来的数据,和最新的数据进行比较,如果数据发生变化则更新,如果数据没有变化则不更新
    // 获取上一次的数据 this.props和this.state  console.log('旧数据', this.props)
    // 最新的数据 nextProps和nextState  console.log('新数据', nextProps)

    return (
      nextProps.c !== this.props.c ||
      nextState.msg !== this.state.msg ||
      nextState.obj.name !== this.state.obj.name
    )
  }
  render() {
    console.log('test挂载或更新了')
    return (
      <div>
        Test,
        <p>{this.props.c}</p>
        <p>{this.state.msg}</p>
        <p>{this.state.obj.name}</p>
        <button
          onClick={() => {
            this.setState({
              msg: 'hello test',
            })
          }}
        >
          setMsg
        </button>
        <button
          onClick={() => {
            // this.state.obj.name = 'ls'
            const newObj = { ...this.state.obj }
            newObj.name = 'ls'
            this.setState({
              obj: newObj,
            })
          }}
        >
          修改obj的name
        </button>
      </div>
    )
  }
}
